Chat.startChat - Code Metrics - pamo18/pamo18.me - Measure and Improve Code Quality continuously with Scrutinizer

Chat.startChat B
last analyzed 2019-10-10 11:44 UTC

↳ Parent: Chat

Complexity

Conditions

Size

Total Lines	52
Code Lines	42

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	42
dl	0
loc	52
rs	8.872
c	0
b	0
f	0
cc	3

How to fix Long Method

/*eslint max-len: ["error", { "code": 150 }]*/

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import base from '../../config/api.js';
import io from 'socket.io-client';

const socket = io(base.chat());

class Chat extends Component {
    static propTypes = {
        match: PropTypes.object.isRequired,
        location: PropTypes.object.isRequired,
        history: PropTypes.object.isRequired
    };
    constructor(props) {
        super(props);
        this.updateConversation = this.updateConversation.bind(this);
        this.newMessage = this.newMessage.bind(this);
        this.state = {
            conversation: [],
            users: "",
            username: ""
        };
    }

    componentDidMount() {
        this.startChat();
        socket.emit('restore conversation');
        if (localStorage.getItem("activeUser")) {
            let user = localStorage.getItem("activeUser"),
                profile = [];

            profile = JSON.parse(user);
            this.setState({
                username: profile.name
            }, () => socket.emit('update users', this.state.username));
        } else {
            this.props.history.push('/login');
        }
    }

    startChat() {
        let that = this;

        socket.on('connect', function() {
            console.info("Connected to chat");
        });

        socket.on('disconnect', function() {
            console.info("Disconnected from chat");
        });

        socket.on('chat message', function (conversation) {
            that.updateConversation(conversation);
        });

        socket.on('restore conversation', function (conversation) {
            that.updateConversation(conversation);
        });

        socket.on('clear conversation', function () {
            that.setState({
                conversation: []
            });
        });

        socket.on('update users', function (users) {
            let currentUsers = [],
                currentConversation = that.state.conversation;

            users.all.map(function (user) {
                currentUsers.push(<li key={user}>{user}</li>);
                return true;
            });

            if (users.new) {
                currentConversation.push(
                    <div className="chat-container message" key={users.new}>
                        <p className="newUser center">{ users.new } has joined the conversation.</p>
                    </div>
                );
            } else if (users.left) {
                currentConversation.push(
                    <div className="chat-container message" key={users.left}>
                        <p className="oldUser center">{ users.left } has left the conversation.</p>
                    </div>
                );
            }

            that.setState({
                users: currentUsers,
                conversation: currentConversation
            });
        });
    }

    updateConversation(conversation) {
        let that = this,
            currentConversation = [];

        conversation.map(function (message) {
            let key = "message-" + message.count,
                containerClass = that.state.username === message.user ? "chat-container me-container" : "chat-container",
                userClass = that.state.username === message.user ? "user me-user" : "user";

            currentConversation.push(
                <div className={containerClass} key={key}>
                    <p className={userClass}>{ message.user }</p>
                    <p className="message">{ message.text }</p>
                    <span className="time-left">{ message.timestamp }</span>
                </div>
            );
            return true;
        });
        this.setState({
            conversation: currentConversation
        });
    }

    clearConversation() {
        socket.emit('clear conversation');
    }

    newMessage(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            socket.emit('chat message', {
                user: this.state.username,
                text: e.target.value
            });
            e.target.value = "";
            this.setState({
                last: e.target.value
            });
        }
    }

    render() {
        return (
            <article>
                <h1>Chat</h1>
                <button className="button chat right" onClick={this.clearConversation}>Clear chat</button>
                <h4>Connected users:</h4>
                <ol>
                    { this.state.users }
                </ol>
                <div id="conversation" className="conversation">{ this.state.conversation }</div>
                <textarea
                    id="new-message"
                    className="new-message"
                    name="message"
                    onKeyDown={ this.newMessage }
                    placeholder="Start chatting, press enter send message."
                />
            </article>
        );
    }
}

export default Chat;


1			/eslint max-len: ["error", { "code": 150 }]/
2
3			import React, { Component } from 'react';
4			import PropTypes from 'prop-types';
5			import base from '../../config/api.js';
6			import io from 'socket.io-client';
7
8			const socket = io(base.chat());
9
10			class Chat extends Component {
11			static propTypes = {
12			match: PropTypes.object.isRequired,
13			location: PropTypes.object.isRequired,
14			history: PropTypes.object.isRequired
15			};
16			constructor(props) {
17			super(props);
18			this.updateConversation = this.updateConversation.bind(this);
19			this.newMessage = this.newMessage.bind(this);
20			this.state = {
21			conversation: [],
22			users: "",
23			username: ""
24			};
25			}
26
27			componentDidMount() {
28			this.startChat();
29			socket.emit('restore conversation');
30			if (localStorage.getItem("activeUser")) {
31			let user = localStorage.getItem("activeUser"),
32			profile = [];
33
34			profile = JSON.parse(user);
35			this.setState({
36			username: profile.name
37			}, () => socket.emit('update users', this.state.username));
38			} else {
39			this.props.history.push('/login');
40			}
41			}
42
43			startChat() {
44			let that = this;
45
46			socket.on('connect', function() {
47			console.info("Connected to chat");
48			});
49
50			socket.on('disconnect', function() {
51			console.info("Disconnected from chat");
52			});
53
54			socket.on('chat message', function (conversation) {
55			that.updateConversation(conversation);
56			});
57
58			socket.on('restore conversation', function (conversation) {
59			that.updateConversation(conversation);
60			});
61
62			socket.on('clear conversation', function () {
63			that.setState({
64			conversation: []
65			});
66			});
67
68			socket.on('update users', function (users) {
69			let currentUsers = [],
70			currentConversation = that.state.conversation;
71
72			users.all.map(function (user) {
73			currentUsers.push(<li key={user}>{user}</li>);
74			return true;
75			});
76
77			if (users.new) {
78			currentConversation.push(
79			<div className="chat-container message" key={users.new}>
80			<p className="newUser center">{ users.new } has joined the conversation.</p>
81			</div>
82			);
83			} else if (users.left) {
84			currentConversation.push(
85			<div className="chat-container message" key={users.left}>
86			<p className="oldUser center">{ users.left } has left the conversation.</p>
87			</div>
88			);
89			}
90
91			that.setState({
92			users: currentUsers,
93			conversation: currentConversation
94			});
95			});
96			}
97
98			updateConversation(conversation) {
99			let that = this,
100			currentConversation = [];
101
102			conversation.map(function (message) {
103			let key = "message-" + message.count,
104			containerClass = that.state.username === message.user ? "chat-container me-container" : "chat-container",
105			userClass = that.state.username === message.user ? "user me-user" : "user";
106
107			currentConversation.push(
108			<div className={containerClass} key={key}>
109			<p className={userClass}>{ message.user }</p>
110			<p className="message">{ message.text }</p>
111			<span className="time-left">{ message.timestamp }</span>
112			</div>
113			);
114			return true;
115			});
116			this.setState({
117			conversation: currentConversation
118			});
119			}
120
121			clearConversation() {
122			socket.emit('clear conversation');
123			}
124
125			newMessage(e) {
126			if (e.key === 'Enter') {
127			e.preventDefault();
128			socket.emit('chat message', {
129			user: this.state.username,
130			text: e.target.value
131			});
132			e.target.value = "";
133			this.setState({
134			last: e.target.value
135			});
136			}
137			}
138
139			render() {
140			return (
141			<article>
142			<h1>Chat</h1>
143			<button className="button chat right" onClick={this.clearConversation}>Clear chat</button>
144			<h4>Connected users:</h4>
145			<ol>
146			{ this.state.users }
147			</ol>
148			<div id="conversation" className="conversation">{ this.state.conversation }</div>
149			<textarea
150			id="new-message"
151			className="new-message"
152			name="message"
153			onKeyDown={ this.newMessage }
154			placeholder="Start chatting, press enter send message."
155			/>
156			</article>
157			);
158			}
159			}
160
161			export default Chat;
162

pamo18 / pamo18.me

Chat.startChat B last analyzed 2019-10-10 11:44 UTC

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like

Chat.startChat B
last analyzed 2019-10-10 11:44 UTC